<template>
  <div class="publish">
    <van-nav-bar title="发布"></van-nav-bar>
    <div class="container">
      <van-form>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field style="margin-top: 10px" v-model="title" name="pattern" placeholder="请输入标题" />

        <van-field readonly clickable name="picker" :value="cate_name" placeholder="请选择" @click="showPicker = true" />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker show-toolbar :columns="columns" @confirm="onConfirm" value-key="name"
            @cancel="showPicker = false" />
        </van-popup>

        <van-field style="margin-top: 10px" v-model="content" rows="5" autosize type="textarea" placeholder="请输入内容"
          show-word-limit />
        <van-field name="uploader" style="margin-top: 10px">
          <template #input>
            <van-uploader v-model="fileList" multiple :max-count="3" />
          </template>
        </van-field>

        <div style="margin: 30px 50px">
          <van-button round block color="#4fc08d" size="normal" :square="true" native-type="submit" @click="publish">提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { addArticle, } from "@/api/api";
import { mapState,mapActions } from "vuex";
import { getCateList } from "@/api/home.js";
export default {
  data() {
    return {
      title: "",
      content: "",
      fileList: [],
      cate_id: "",
      cate_name: "",
      columns: [],
      showPicker: false,
    };
  },
  created() {
    this.getCate();
  },
  computed: {
    ...mapState(["uid", "userInfo"]),
  },
  methods: {
    ...mapActions(['upload']),
    getCate() { 
      getCateList().then((res) => {
        console.log(res);
        this.columns = res.data;// 第一次请求成功  他会有数据
      });
    },
    async publish(e) {
      let { title, content, fileList, uid, userInfo, cate_name, cate_id } =
        this;
      if (!uid) {
        this.$toast('请先登录')
        return
      }
      console.log(title, content, fileList, uid, userInfo, cate_name, cate_id);


      let imageSrc = await this.upload(fileList); //上传逻辑 单独封装了
      // console.log(imageSrc)
      // return 
      addArticle({
        title,
        content,
        cate_name,
        cate_id,
        author_id: uid,
        imageSrc,
        author: userInfo.nickname,
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$toast("恭喜您发布成功");
          //  也可以做一个立即查看功能
        } else {
          this.$toast(res.msg);
        }
      });
    },
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },
    onConfirm({ name, _id }) {
      this.cate_name = name;
      this.cate_id = _id;
      this.showPicker = false;
    },
  },
};
</script>

<style lang="less">
.title {
  height: 50px;
  background-color: green;
  color: white;
}
</style>